import { Link,  useLocation, useOutlet } from 'react-router-dom';
import { AppWrap, LayoutWrap } from '@/views/AppWarp.tsx';
import { KeepAliveOutlet, OffScreenContext, useActivity } from '@/components/KeepAliveOutlet';
import { createBrowserHistory } from 'history';

const App = () => {
  const routers = [{ name: 'Home', path: '/home' }, { name: 'Color', path: '/color' }, {
    name: 'Theme',
    path: '/theme',
  }, { name: 'Tutorial', path: '/tutorial' }];
  const location = useLocation();
  if (location.pathname === '/') {
    location.pathname = '/home';
  }

  const history = createBrowserHistory();
  const outlet = useOutlet();
  const res = useActivity({ action: history.action, location, outlet });

  const handleSkipTheme = () => {
    console.log(history);
  }

  return (<>
    <AppWrap>
      <div className="wrap">
        <h1>App Router Tabs <button onClick={handleSkipTheme}>skip theme</button></h1>
        <div className="router">
          {routers.map(router => {
            return (<div key={router.name} className={router.path === location.pathname ? 'active' : ''}>
                <Link to={`${router.path}`}>{router.name}</Link>
              </div>);
          })}
        </div>
      </div>
    </AppWrap>
    <LayoutWrap>
      <div className="sidebar">
        {routers.map(router => {
          return (<div key={router.name} className={router.path === location.pathname ? 'active' : ''}>
            <Link to={`${router.path}`}>{router.name}</Link>
          </div>);
        })}
      </div>
      <div className="content">
        <OffScreenContext.Provider value={{ ...res }}>
          <KeepAliveOutlet>
          </KeepAliveOutlet>
        </OffScreenContext.Provider>
      </div>
    </LayoutWrap>
  </>);
};

export default App;
